<template>
  <div>
    <page-header title="操作权限"></page-header>
    <pageMain>
      <div class="chunk">
        <el-table :data="optionList" stripe style="width: 100%">
          <el-table-column prop="option" label="操作"></el-table-column>
          <el-table-column prop="state" label="状态" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.state == 1"
                ><el-tag type="success">正常</el-tag></template
              >
              <template v-if="scope.row.state == 2"
                ><el-tag type="info">停用</el-tag></template
              >
            </template>
          </el-table-column>
          <el-table-column prop="comment" label="备注"> </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            width="140"
            align="center"
          >
            <template slot-scope="scope">
              <div class="table-options overall-flex">
                <el-link type="primary">编辑</el-link>
                <el-link
                  type="danger"
                  @click="clickRemove(scope.row, scope.$index)"
                  >删除</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-dialog
        title="添加操作权限"
        :visible.sync="addDialogShow"
        width="60%"
        center
        :modal-append-to-body="false"
      >
        <el-form
          ref="form"
          :model="addOptionForm"
          label-width="80px"
          label-position="left"
        >
          <el-form-item label="权限分组">
            <el-select
              v-model="addOptionForm.region"
              placeholder="请选择所属分组"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作名称">
            <el-input
              v-model="addOptionForm.name"
              placeholder="权限名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="操作标识">
            <el-input
              v-model="addOptionForm.name"
              placeholder="英文唯一标识名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="说明">
            <el-input type="textarea" v-model="addOptionForm.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="clickAdd">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </pageMain>
  </div>
</template>

<script>
import pageMain from "~/page-main/page-main.vue";
import pageHeader from "~/page-header/page-header.vue";
import API from "@/api";
export default {
  components: {
    pageMain,
    pageHeader,
  },
  data() {
    return {
      optionList: [],
      pageData: {
        page: 1,
        limit: 1,
      },
      addDialogShow: true,
      addOptionForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {
    getData() {
      let { page, limit } = this.pageData;
      API.optionAuth
        .list({ page, limit })
        .then((res) => {
          let { data } = res;
          this.optionList = [];
          this.optionList = data.list;
        })
        .catch((err) => {
          this.$message.error("获取操作权限列表失败:" + err.message ?? err.msg);
        });
    },
    clickAdd() {
      API.optionAuth
        .add({})
        .then((res) => {
          console.log("添加操作权限列表成功");
          console.log(res);
        })
        .catch((err) => {
           this.$message.error(err.message ?? err.msg);
        });
    },
    clickRemove(item, index) {
      API.optionAuth
        .remove({ id: item.id })
        .then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.optionList.splice(index, 1);
        })
        .catch((err) => {
          if (typeof err != "string") {
            this.$message({
              message: err.msg,
              type: "error",
            });
          }
        });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style scoped>
.chunk {
  background: white;
  margin-bottom: 20px;
  padding: 14px 14px;
}
.table-options {
  justify-content: space-around;
}
</style>
